<template>
  <div data-spy="scroll" data-target="#navbar-scroll">
    <div id="preloader"></div>
    <div id="top"></div>

    <div id="menu">
      <nav class="navbar-wrapper navbar-default" role="">
        <div class="container">
<!--          <div class="navbar-header">-->
<!--            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-backyard">-->
<!--              <span class="sr-only">广西</span>-->
<!--              <span class="icon-bar"></span>-->
<!--              <span class="icon-bar"></span>-->
<!--              <span class="icon-bar"></span>-->
<!--            </button>-->
<!--          </div>-->
          <div id="navbar-scroll" class="collapse navbar-collapse navbar-backyard navbar-left">
            <ul class="nav navbar-nav">
              <li><a @click="index" style="cursor: pointer;">返回</a></li>
            </ul>
          </div>
          <div id="navbar-scroll " class="collapse navbar-collapse navbar-backyard navbar-right">
            <ul class="nav navbar-nav">
              <li><a  @click="natural">自然风光</a></li>
              <li><a @click="nation">壮乡风情</a></li>
              <li><a @click="food">美食</a></li>
              <li><a @click="city">城市</a></li>
              <li><a @click="anniversary" >宣传片</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
    <div class="fullscreen landing parallax" style="background-image:url('../../static/images/city2.jpg');" data-img-width="2000" data-img-height="1125" data-diff="100">

      <div class="overlay">
        <div class="container">
          <div class="row">
            <div class="col-md-10 col-md-offset-1 text-center">
              <div class="logo wow fadeInDown"></div>
              <h1 class="wow fadeInLeft">
                广西城市
              </h1>
              <div class="landing-text wow fadeInUp">
                <p>截至2016年，广西辖14个地级市，县级行政区111个（包括40个市辖区、8个县级市、52个县、12个自治县），乡级行政区1247个（包括120个街道、722个镇、346个乡、59个民族乡）。自治区政府驻地南宁市民生路2号。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="package">
      <div class="container">
        <div class="text-center">
          <h2 class="wow fadeInLeft">广西四大城市</h2>
          <div class="title-line wow fadeInRight"></div>
        </div>
        <div class="row package-option">
          <div class="col-sm-3">
            <div class="price-box wow fadeInUp">
              <div class="price-heading text-center">
                <i class="pe-7s-radio pe-5x"></i>
                <h3>南宁</h3>
              </div>
              <div class="price-group text-center">
                <span class="price">1</span>
              </div>
              <ul class="price-feature text-center">
                <li><strong>别称：</strong>绿城、邕城、五象城</li>
                <li><strong>辖区：</strong>青秀区、兴宁区、西乡塘区、江南区、良庆区、邕宁区、武鸣区、隆安县、马山县、上林县、宾阳县、横县</li>
                <li><strong>车牌代码：</strong>桂A</li>
                <li><strong>所属地区：</strong>华南地区</li>
                <li><strong>邮政区码：</strong>530000</li>
              </ul>
              <div class="price-footer text-center">
                <a class="btn btn-price" >查看详情</a>
              </div>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="price-box wow fadeInUp" data-wow-delay="0.2s">
              <div class="price-heading text-center">
                <i class="pe-7s-joy pe-5x"></i>
                <h3>柳州</h3>
              </div>
              <div class="price-group text-center">
                <span class="price">2</span>
              </div>
              <ul class="price-feature text-center">
                <li><strong>别称：</strong>龙城、壶城、奇石城</li>
                <li><strong>辖区：</strong>柳北区、柳南区、柳江区、城中区、鱼峰区、鹿寨县、柳城县、融安县、融水苗族自治县、三江侗族自治县</li>
                <li><strong>车牌代码：</strong>桂B</li>
                <li><strong>所属地区：</strong>广西壮族自治区中北部</li>
                <li><strong>邮政区码：</strong>545000</li>
              </ul>
              <div class="price-footer text-center">
                <a class="btn btn-price" >查看详情</a>
              </div>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="price-box wow fadeInUp" data-wow-delay="0.4s">
              <div class="price-heading text-center">
                <i class="pe-7s-science pe-5x"></i>
                <h3>桂林</h3>
              </div>
              <div class="price-group text-center">
                <span class="price">3</span>
              </div>
              <ul class="price-feature text-center">
                <li><strong>别称：</strong>八桂、桂州、始安、静江</li>
                <li><strong>辖区：</strong>象山区、秀峰区、叠彩区、七星区、雁山区、临桂区、阳朔县、灵川县、全州县、平乐县、兴安县、灌阳县、荔浦县、资源县、永福县、龙胜各族自治县、恭城瑶族自治县</li>
                <li><strong>车牌代码：</strong>桂C</li>
                <li><strong>所属地区：</strong>中国·广西壮族自治区</li>
                <li><strong>邮政区码：</strong>541000</li>
              </ul>
              <div class="price-footer text-center">
                <a class="btn btn-price" >查看详情</a>
              </div>
            </div>
          </div>

          <div class="col-sm-3">
            <div class="price-box wow fadeInUp" data-wow-delay="0.6s">
              <div class="price-heading text-center">
                <i class="pe-7s-tools pe-5x"></i>
                <h3>梧州市</h3>
              </div>
              <div class="price-group text-center">
                <span class="price">4</span>
              </div>
              <ul class="price-feature text-center">
                <li><strong>别称：</strong>绿城水都</li>
                <li><strong>辖区：</strong>长洲区、万秀区、龙圩区、岑溪市、苍梧县、蒙山县、藤县</li>
                <li><strong>车牌代码：</strong>桂D</li>
                <li><strong>所属地区：</strong>广西壮族自治区</li>
                <li><strong>邮政区码：</strong>543000</li>
              </ul>
              <div class="price-footer text-center">
                <a class="btn btn-price" >查看详情</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer id="footer">
      <div class="container">
        <div class="el-backtop" style="position: absolute; right: 60px;bottom: 50px">
          <a href="#top"><i class="el-icon-caret-top"></i></a>
        </div>
        <div class="text-center wow fadeInUp" style="font-size: 14px;">2019.12.10 </div>
      </div>
    </footer>

  </div>
</template>

<script>
    export default {
      methods:{
        index(){
          this.$router.push('/');
        },
        natural(){
          this.$router.push('/natural');
        },
        city(){
          this.$router.push('/city');
        },
        nation(){
          this.$router.push('/nation');
        },
        food(){
          this.$router.push('/food');
        },
        anniversary(){
          this.$router.push('/anniversary');
        }
      }
    }
</script>

<style scoped>

</style>
